<template>
  <div class="peolist">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="姓名:">
          <el-input v-model="formInline.realName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input v-model="formInline.identityCard"></el-input>
        </el-form-item>
        <el-form-item label="是否过期:">
          <el-select v-model="formInline.isOverdue">
            <el-option label="已过期" value="1"></el-option>
            <el-option label="未过期" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPeopelList" size="small">查询</el-button>
          <el-button @click="onexport" size="small">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px" id="content">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>人员总数:<span style="color:red;margin:0 5px">{{pagination.pageTotal}}</span></p>
          <el-button size="small" type="primary" @click="addClick">添加维保人员</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <div @click="infoClick(scope.row)" style="color:#0090EC;cursor: pointer;">{{scope.row.realName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证" width="200">
        </el-table-column>
        <el-table-column prop="certProject" label="资格项目">
          <template slot-scope="scope">
            {{certProjectArr[scope.row.certProject]}}
          </template>
        </el-table-column>
        <el-table-column label="人员证件">
          <template slot-scope="scope">
            <div @click="download(scope.row.certUrl)" style="color:#0090EC;cursor: pointer;">{{scope.row.certFileName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="certExpDate" label="证件有效期">
        </el-table-column>
        <el-table-column prop="isOverdue" label="是否过期">
          <template slot-scope="scope">
            {{isOverdueArr[scope.row.isOverdue]}}
          </template>
        </el-table-column>
        <el-table-column prop="phonenumber" label="联系电话">
        </el-table-column>
        <el-table-column prop="userName" label="账号">
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <DailogPage ref="dailog" />
  </div>
</template>

<script>
import util from '@/libs/util'
import { getmaintUserList, delMaintWorker } from '@/api/people'
import DailogPage from './components/dailogpage.vue'
export default {
  components: {
    DailogPage
  },
  data () {
    return {
      certProjectArr: {
        1: '电梯电气安装维修',
        2: '电梯机械安装维修',
        3: '电梯修理'
      },
      isOverdueArr: {
        0: '否',
        1: '是'
      },
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
      },
      tableData: []
    }
  },
  mounted () {
    this.getPeopelList()
  },
  methods: {
    // 点击下载
    download (url) {
      window.open(util.fileIP + url)
    },
    //获取人员列表
    getPeopelList () {
      const query = {
        identityCard: this.formInline.identityCard,
        isOverdue: this.formInline.isOverdue,
        realName: this.formInline.realName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getmaintUserList(query).then(res => {
        if (res.data.code == '200') {
          this.pagination.pageTotal = res.data.data.total
          this.tableData = res.data.data.list
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = key
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = key
    },
    onexport () {
    },
    deleteRow (e) {
      this.$confirm('此操作将永久删除人员,而且其他相关数据都会删除，包含计划，工单等, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const query = {
          id: e.id,
          userId: e.userId
        }
        delMaintWorker(query).then(res => {
          if (res.data.code == '200') {
            this.getPeopelList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },
    editClick (e) {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '人员修改'
      const params = JSON.parse(JSON.stringify(e))
      if (params.url) {
        const url = util.fileIP + params.url
        this.$refs.dailog.fileList.push({ ...params, url: url })
      }
      if (params.certUrl) {
        const url = util.fileIP + params.certUrl
        this.$refs.dailog.fileList1.push({ ...params, url: url })
        this.$refs.dailog.certFileName = params.certFileName
      }
      this.$refs.dailog.formInline = params
    },
    addClick () {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '人员添加'
    },
    infoClick (e) {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '人员详情'
      this.$refs.dailog.disabled = true
      const params = JSON.parse(JSON.stringify(e))
      if (params.url) {
        const url = util.fileIP + params.url
        this.$refs.dailog.fileList.push({ ...params, url: url })
      }
      if (params.certUrl) {
        const url = util.fileIP + params.certUrl
        this.$refs.dailog.fileList1.push({ ...params, url: url })
        this.$refs.dailog.certFileName = params.certFileName
      }
      this.$refs.dailog.formInline = params
    }
  }
}

</script>
<style lang='less' scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.el-pagination {
  margin-top: 2vh;
  text-align: right;
}

::v-deep .el-form-item__label {
  font-weight: bold;
}
.peolist {
  .clearfix {
    font-weight: bold;
  }
}
::-webkit-scrollbar {
  width: 0px;
}
</style>